<template>
  <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="auto" class="formData">
    <el-form-item label="上传文件" prop="code">
      <UploadFile @submit="(v) => (formData.code = v.code)" @del="formData.code = ''" :customerType="customerType" />
    </el-form-item>
    <el-form-item label="重复数据处理方式" prop="duplicate">
      <div>
        <el-radio-group v-model="formData.duplicate">
          <el-radio label="1">保留新数据</el-radio>
          <el-radio label="2">保留老数据</el-radio>
          <el-radio label="3">补充老数据空白项</el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item label="客户标签" prop="cust_tag_ids">
      <el-button @click="openBatchLabel">请选择标签</el-button>
      <div style="margin-top:5px">
        <el-tag v-for="(item, index) in tabs" :key="index" class="choosetabs"  @close="delTab(index)"  closable >
         {{ item.name }}
       </el-tag>
      </div>
    </el-form-item>
    <el-form-item label="所属员工" prop="belong_work_user_id">
      <div class="chooselist">
        <el-button @click="openDepart">请选择员工</el-button>
        <div class="yuangong-desc upload-desc"> 注意：已存在的客户指派的员工将不会被重新指派 </div>
      </div>
      <div class="yuangong-list">
        <div v-for="item in yuangongList" :key="item.name">
          <img src="@/assets/image/customer/renyuan_icon.png" alt="" />
          <span>{{ item.name }}</span>
          <img @click="changeDepart(item)" class="del_icon" src="@/assets/image/customer/close_icon.png" alt="" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="公海池">
      <el-select v-model="formData.seas_id" class="m-2" placeholder="默认当前公海池">
        <el-option v-for="item in selectData" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
  </el-form>
  <div class="footer">
    <ul>
      <li>1、文件必须为xlsx格式(如果xls格式请另存为xlsx格式)</li>
      <li>2、不支持导入存在多个工作表的文件，默认只导入第一个工作表，空行将自动过滤</li>
      <li>3、手机号、邮箱等信息，在一个单元格里不支持填入多个</li>
      <li>4、尽量避免合并单元格，否则导入可能存在异常</li>
      <li>5、文件内容不能包含公式，否则可能会影响导入结果</li>
    </ul>
  </div>
  <ZWDepart ref="DepartRef" @submit="getDepart" :unauthorized="true" />
  <!-- 批量标签弹框 -->
  <BatchLabel ref="BatchLabelRef" @save="getLabelFun" />
</template>

<script lang="ts" setup>
  import UploadFile from './UploadFile.vue'
  import BatchLabel from './BatchLabel.vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import Dialog from '@/components/Dialog.vue'
  import { batchImportAsyncCustomer, batchImportQyCustomer, downloadTemplate, downloadQyCustomerTemplte, getCustomerOpenseaSelect } from '@/api/customer/manage/list'
  import { ElMessage } from 'element-plus'
  import { ref, reactive, watch, onMounted } from 'vue'
  import type { ElForm } from 'element-plus'
  import { getSetionId } from '@/utils/utils'
  import { ShowTaskMessage } from '@/hooks/TaskMessageHooks' 
  type FormInstance = InstanceType<typeof ElForm>
  interface Props {
    customerType?: any
    multiple?: any,
    batchImportType?:any
  }
  const props = withDefaults(defineProps<Props>(), {
    customerType: 1,
    multiple: false, // 是否多选
    batchImportType:1 // 批量导入类型 客户列表-1 客户公海-2 客户分配-3
  })
  const emit = defineEmits(['submit'])
  const ruleFormRef = ref<FormInstance>()
  const BatchLabelRef = ref<any>(null)
  const tabs = ref([])
  const rules = reactive({
    code: [{ required: true, message: '请上传文件', trigger: 'change' }],
    belong_work_user_id: [{ required: true, message: '请选择所属员工', trigger: 'change' }],
    duplicate: [{ required: true, message: '请选择重复数据处理方式', trigger: 'change' }],
  })
  const formData = ref<any>({
    type: props.batchImportType, //导入来源 1-客户列表导入 2-客户公海导入
    code: '', //附件码
    seas_id: '', //公海id
    duplicate:'3',//重复数据
    belong_work_user_id: [], //归属员工
    cust_tag: [] //客户标签
  })

  // 打开选择标签弹框
  const openBatchLabel = () => {
    BatchLabelRef.value.dialogVisible = true
    BatchLabelRef.value.dialogData.labelChooseType = 1
    BatchLabelRef.value.dialogData.delname = '移除'
    if (tabs.value.length > 0) {
      BatchLabelRef.value.chooseDataArr = [...tabs.value]
    }
  }
  // 获取选择的标签
  const getLabelFun = (val: any) => {
    console.log(val.idList, 5555)
    formData.value.cust_tag = getSetionId('id', val.data)
    tabs.value = [...val.data]
  }
  // 删除选中的标签
  const delTab = (index: number) => {
    tabs.value.splice(index, 1)
    formData.value.cust_tag.splice(index, 1)
  }
  // 选择员工
  const yuangongList = ref([])
  const DepartRef = ref<any>(null)
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.multiple = true
    DepartRef.value.selectedMember = yuangongList.value
  }
  const getDepart = (res: any) => {
    yuangongList.value = res
    formData.value.belong_work_user_id = getSetionId('id', yuangongList.value)
    DepartRef.value.departVisble = false
  }
  const changeDepart = (data: any) => {
    yuangongList.value = yuangongList.value.filter((item: any) => item.id != data.id)
    formData.value.belong_work_user_id = getSetionId('id', yuangongList.value)
    DepartRef.value.removeItem(data)
  }

  // 保存
  const onSubmit = async () => {
    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid, fields) => {
      if (valid) {
        let params = {
          type: props.batchImportType,
          code: formData.value.code,
          cust_tag_ids: formData.value.cust_tag,
          work_user_ids: formData.value.belong_work_user_id,
          cust_seas_id: formData.value.seas_id,
          duplicate: formData.value.duplicate
        }
        props.customerType == 1
          ? batchImportAsyncCustomer(params).then((res: any) => {
              ShowTaskMessage('批量导入客户异步任务创建成功')
              emit('submit')
            })
          : batchImportQyCustomer(formData.value).then((res: any) => {
              ShowTaskMessage('批量导入企业客户异步任务创建成功')
              emit('submit')
            })
      } else {
        ElMessage.warning(Object.values(fields)[0][0].message)
      }
    })
  }
  const selectData = ref<any>([])
  const onGetSelectData = () => {
    getCustomerOpenseaSelect({ type: 1 }).then((res: any) => {
      console.log(res, '2222')
      selectData.value = res
      res.length && (formData.value.seas_id = res[0].id)
    })
  }
  onMounted(() => {
    onGetSelectData()
  })
  defineExpose({
    onSubmit
  })
</script>

<style lang="scss" scoped>
  .tabs_box {
    :deep(.el-tabs__item) {
      color: #969696;
    }
    :deep(.is-active) {
      // font-weight: 600;
      color: #ff6b00;
    }
  }
  .formData {
    // max-height: 50vh;
    // overflow-y: scroll;
    padding: 24px 30px 0 0;
    .upload-content {
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 180px;
      height: 36px;
      border: 1px solid #eaeaea;
      margin-bottom: 6px;
      .upload {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
        opacity: 0;
      }
      .upload-box {
        position: relative;
        width: 180px;
        height: 36px;
        border-radius: 4px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #969696;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 9px;
        }
      }
      .upload-file-box {
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        width: 180px;
        height: 36px;
        line-height: 36px;
        .left {
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          color: #33302d;
          padding-left: 10px;
          span {
            vertical-align: middle;
          }
          img {
            margin-top: 8px;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            vertical-align: middle;
          }
        }
        .right {
          cursor: pointer;
          width: 12px;
          height: 12px;
          margin-right: 10px;
          margin-top: 12px;
        }
      }
    }

    .download {
      font-size: 12px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #ff6b00;
      // margin-left: 10px;
      cursor: pointer;
    }
    .upload-desc {
      margin-top: 6px;
      // background: #f9f9f9;
      color: #969696;
      border-radius: 1px;
      font-size: 12px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #696969;
      padding: 4px 8px;
      line-height: 16px;
    }
    .tabs-box {
      margin-bottom: 7px;

      div {
        display: inline-block;
        background: #fffaf9;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        justify-content: center;
        align-items: center;
        padding: 0 4px;
        line-height: 22px;
        height: 22px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #ff6b00;
        margin-right: 10px;
        margin-bottom: 7px;
        .del-icon {
          margin-left: 8px;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
    .chooselist{
      display: flex;
    }
    .choosetabs{
      margin-right: 10px;
    }
    .yuangong-list {
      margin-top: 10px;
      div {
        display: inline-block;
        vertical-align: middle;
        background: #fffaf9;
        border-radius: 1px;
        margin-right: 10px;
        // margin-bottom: 10px;
        padding: 4px 8px;
        line-height: 22px;
        box-sizing: border-box;
        img {
          width: 10px;
          height: 12px;
        }
        .del_icon {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
        span {
          margin: 0 10px;
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          color: #35383a;
        }
      }
    }
  }
  .formData::-webkit-scrollbar {
    display: none;
  }
  .footer{
    background: #FFFAF9;
    border-radius: 4px;
    padding: 15px 10px;
    li{
      margin: 5px 0px;
    }
  }
</style>

<style>
  .upload-content .el-upload {
    display: block !important;
  }

  .upload-content .el-form-item__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>
